<template>
  <div class="PageTools-container">
    <div class="app-container">
      <div class="left">
        <div class="tips">
          <i class="el-icon-info icon"></i>
          <!-- 左侧插槽 -->
          <slot name="slot-left">暂无数据</slot>
        </div>
      </div>
      <div class="right">
        <slot name="slot-right">
          <span>按钮插槽</span>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageTools',
  data() {
    return {}
  },
}
</script>

<style lang="less" scoped>
.PageTools-container {
  margin-bottom: 0.2667rem;
  border-radius: 0.1067rem;
  border: 0.0267rem solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  box-shadow: 0 0.0533rem 0.32rem 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  .app-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    .left {
      .tips {
        padding: 5px;
        border-radius: 5px;
        background-image: linear-gradient(to left, #cd69c9, var(--themeColor));
        color: #fff;
        .icon {
          margin-right: 8px;
          color: #fff;
        }
      }
    }
    // .right {
    // }
  }
}
</style>
